<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HUB文件下载</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .container {
      background-color: white;
      border-radius: 5px;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    h3 {
      margin-top: 0;
      color: #333;
    }
    .status {
      margin: 15px 0;
      padding: 10px;
      background-color: #f0f7ff;
      border-left: 4px solid #0066cc;
      color: #333;
    }
    .progress-container {
      width: 100%;
      height: 20px;
      background-color: #eee;
      border-radius: 10px;
      margin: 15px 0;
    }
    .progress-bar {
      height: 100%;
      background-color: #4CAF50;
      border-radius: 10px;
      width: 0%;
      transition: width 0.3s;
    }
    .file-info {
      margin-top: 10px;
      font-size: 0.9em;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3>HUB文件下载</h3>
    <div class="status" id="status">正在准备下载...</div>
    <div class="progress-container">
      <div class="progress-bar" id="progress-bar"></div>
    </div>
    <div class="file-info" id="file-info">准备下载文件: {{filename}}</div>
  </div>

  <script>
    // 更新状态
    function updateStatus(message) {
      document.getElementById('status').innerText = message;
    }
    
    // 更新进度条
    function updateProgress(percent) {
      document.getElementById('progress-bar').style.width = percent + '%';
    }
    
    // 更新文件信息
    function updateFileInfo(info) {
      document.getElementById('file-info').innerText = info;
    }
    
    // 下载完成
    function downloadCompleted() {
      updateStatus('下载已完成！准备导入...');
      updateProgress(100);
    }
  </script>
</body>
</html> 